<template>


  <div id="recommend-view">


    <van-loading v-if="loading" class="loading" />

    <slide :recommend="recommend" />
    <Nav-bar :scroll-opacity="scrollOpacity" />
    <!-- <Pop-Up /> -->
    <Tab :tab="tab" />
    <first-content />
    <Tab-bar />
  </div>
</template>
<script setup>
import TabBar from "@/components/common/TabBar.vue"


import { getHomeList } from "@/api/index.js"
import { ref, onMounted, onUnmounted } from 'vue'

const loading = ref(true)


const recommend = ref([])
const tab = ref([])
const scrollOpacity = ref(0); // 控制 NavBar 的透明度
onMounted(async () => {
  const response = await getHomeList()
  recommend.value = response.data.recommend
  // console.log("recommend", recommend.value);
  tab.value = response.data.tab //首页tab全部数据

  loading.value = false;
  // 监听滚动事件
  window.addEventListener('scroll', handleScroll);
});
// 移除滚动事件监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
})
// 滚动事件处理函数
function handleScroll () {
  const scrollTop = window.scrollY || document.documentElement.scrollTop; // 获取滚动距离
  const maxScroll = 200; // 设置最大滚动距离，超过此值背景完全变为白色
  scrollOpacity.value = Math.min(scrollTop / maxScroll, 1); // 计算透明度，范围为 0 到 1
};




</script>


<style scoped>
.recommend-view {
  position: relative;
}


.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
</style>
